<template>
  <div :class="$style.release">
    <Icon :allow="allow" :src="src" :srcset="srcset" :text="text" @on-click="iconClickHandle" />
  </div>
</template>
<script>
import Icon from './Icon'
import beforeSign from './js/beforeSign.js'
import afterSign from './js/afterSign.js'
import { mapGetters } from 'vuex'
export default {
  name: 'Release',
  components: {
    Icon
  },

  data() {
    return {}
  },
  computed: {
    ...mapGetters(['callInfo', 'agentState', 'interval', 'skillList', 'queueSize', 'agentid', 'phonenum', 'agentInfo']),
    src() {
      return this.allow ? afterSign.hangup : beforeSign.hangup
    },
    srcset() {
      return this.allow ? afterSign.hangup2x : beforeSign.hangup2x
    },
    text() {
      return '挂机'
    },
    allow() {
      const { sign, talk } = this.agentState
      return sign && talk
    }
  },
  created() {},
  methods: {
    // 话务条被单击
    iconClickHandle() {
      if (this.allow) {
        this.$cps.releaseCall(this.callInfo.callid).then(res => {
          this.$notifySuccess('挂机成功！')
          this.$callOperatorLogSuccess(8) // 挂机成功
          // 通过api挂机座席不会进入工作状态
          this.$cps.bus.$emit('OnCallStateWork')
          this.$cps.bus.$emit('OnCancelWorkSuccess')
        }).catch(() => {
          this.$callOperatorLogFail(8) // 挂机失败
          this.$notifyError('挂机失败！')
        })
      }
    }
  }
}
</script>
<style lang="scss" module>
@import "@/styles/mixin.scss";
.release {
}
.btn{
  @include flex($justify: flex-end);
}
</style>
